<template>
  <div class="box">
    <el-card v-loading="loading">
      <el-row>
        <el-col :span="24">
          <div class="title">{{ title }}</div>
        </el-col>
        <el-col :span="16" style="font-size: 14px;line-height: 32px;">
          <span style="margin-right: 24px">发布时间：{{ time }}</span>
          <span>发布人：{{ user }}</span>
        </el-col>
        <el-col :span="8">
          <div style="text-align: right">
            <el-button
              type="primary"
              @click="handlePass"
              v-show="type === '1'"
              >通过
            </el-button>
            <el-button
              type="danger"
              @click="handleReject"
              v-show="type === '1'"
              >驳回</el-button
            >
            <el-button  @click="handleBack">返回</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <div v-html="content"></div>
      </el-row>
      <el-divider></el-divider>
      <el-row v-show="fileList.length > 0" style="font-size: 14px">附件</el-row>
      <el-row v-show="fileList.length > 0">
        <el-col
            :span="24"
            v-for="item in fileList"
            :key="item.attachmentId"
            style="padding: 12px 0 12px 12px"
        >
          <el-link type="primary" @click="handleDownload(item.filePath)"
          >{{ item.fileName }}
          </el-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import { mapMutations } from "vuex";
import { getNoticeDetailApi } from "@/api/modules/notice.api";
import { approvePass, approveReject } from "@/api/modules/approve.api";

export default {
  props: ["previewsObj"],
  data() {
    return {
      type: "0",
      visible: false,
      loading: true,
      active: 0,
      moduleList: [],
      form: {},
      content: "",
      title: "",
      modules: "",
      time: "",
      user: "",
      placeholder: "",
      fileList: [],
      filePicList: [],
      editorOptions: {
        modules: {
          toolbar: false, // 将 toolbar 设置为 false 隐藏工具栏
        },
        placeholder: "",
        readOnly: true,
      },
      filePic: "",
      filePicArr: [],
    };
  },
  // watch: {
  //   previewsObj(val) {
  //     // this.breadcrumbObj = data
  //     console.log('previewsObj aaaa', val)
  //     this.content = val.content
  //     this.title = val.articleTitle
  //   },
  // },
  mounted() {
    // this.getTableData({})
    console.log(this.$route.query);
    this.getDetail(this.$route.query.id);
    this.type = this.$route.query.type;
    // console.log('previewsObj', this.previewsObj)
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getDetail(id) {
      if (id) {
        const res = await getNoticeDetailApi(id);
        // console.log(res);
        this.content = res.content;
        this.title = res.name;
        this.time = res.createDate;
        this.user = res.userName;
        // this.fileList = res.attachmentList
        res.attachmentList.forEach((item) => {
          this.fileList.push(item);
        });
        // this.filePic =
        //   this.filePicList.length > 0 ? this.filePicList[0].filePath : "";
        // this.filePicArr.push(this.filePic);
        this.loading = false;
      }
    },
    // focus(event) {
    //   event.enable(false);
    // },
    // onEditorBlur(v) {
    //   v.enable(!this.disabled);
    // },
    handleDownload(path) {
      // console.log(path);
      window.open(path);
    },
    handleBack() {
      this.$router.push({ path: "/writings/notifications" });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "通知公告",
          path: "/writings/notifications",
        },
      ]);
    },
    async handlePass() {
      await approvePass({ id: this.$route.query.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },
    async handleReject() {
      await approveReject({ id: this.$route.query.approveId });
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.$router.push({ path: "/approval/list" });
      this.setBreadcrumb([
        {
          name: "审批管理",
          path: "/approval",
        },
        {
          name: "我的待办",
          path: "/approval/list",
        },
      ]);
    },

    // async handleAdd() {
    //   const configureObj = this.$refs.configure.getContent()
    //   const contentObj = this.$refs.content.getContent()
    //   const annexesObj = this.$refs.annexes.getContent()
    //   const obj = {
    //     ...configureObj,
    //     content: contentObj,
    //     fileList: configureObj.fileList.concat(annexesObj),
    //     status: 1
    //   }
    //   console.log(' obj.checkedCities',  obj)
    //   obj.boldFlag = obj.checkedCities?.includes('加粗')
    //   obj.topFlag = obj.checkedCities?.includes('置顶')
    //   obj.pushSchool = obj.checkedCities?.includes('推送学校')
    //   obj.outChainFlag = obj.outChainFlag === '0'
    //   delete obj.checkedCities
    //   await insertArticleApi(obj)
    // },
    // async handleSave() {
    //   const configureObj = this.$refs.configure.getContent()
    //   const contentObj = this.$refs.content.getContent()
    //   const annexesObj = this.$refs.annexes.getContent()
    //   const obj = {
    //     ...configureObj,
    //     content: contentObj,
    //     fileList: configureObj.fileList.concat(annexesObj),
    //     status: 0
    //   }
    //   obj.boldFlag = obj.checkedCities.include('加粗')
    //   obj.topFlag = obj.checkedCities.include('置顶')
    //   obj.pushSchool = obj.checkedCities.include('推送学校')
    //   obj.outChainFlag = obj.outChainFlag === '0'
    //   delete obj.checkedCities
    //   await insertArticleApi(obj)
    //   this.$message({
    //     message: '成功',
    //     type: 'success'
    //   });
    // },
    // async getTableData({...data}){
    //   const item = await getModuleListApi({ ...data })
    //   console.log(item)
    //   this.moduleList = item
    // }
  },
};
</script>
<style scoped>
.box {
  height: calc(100vh - 60px - 50px - 24px);
  overflow: auto;
}

/deep/ .ql-container.ql-snow {
  border: none;
}

.quill-editor {
  width: calc(100vw - 220px - 48px - 48px);
}

.ql-container {
  width: calc(100vw - 220px - 48px - 48px);
}

.ql-editor {
  width: calc(100vw - 220px - 48px - 60px);
}

/deep/ .quill-editor img {
  max-width: calc(100vw - 220px - 48px - 60px) !important;
}

.title {
  font-size: 36px;
  text-align: center;
  margin-bottom: 36px;
}
</style>
